<template>
  <div class="restaurant-detail-page">
    <el-card :body-style="{ padding: '10px' }">
      <div class="restaurant-info-container">
        <img :src="restaurant.imageUrl" alt="餐厅图片" class="restaurant-image">
        <!-- 移动餐厅信息到右侧空白处 -->
        <div class="restaurant-info-right">
          <h3 class="info-title">餐厅信息</h3>
          <p><span class="info-label">营业时间：</span>{{ restaurant.businessHours }}</p>
          <p><span class="info-label">联系电话：</span>{{ restaurant.phoneNumber }}</p>
          <p><span class="info-label">特色服务：</span>{{ restaurant.specialServices }}</p>
          <!-- 移除餐厅容量信息 -->
          <p><span class="info-label">是否可预订：</span>{{ restaurant.isReservable }}</p>
          <!-- 添加收藏按钮 -->
          <el-button
              type="primary"
              class="favorite-button"
              :class="{ 'is-favorited': isFavorited }"
              @click="toggleFavorite">
            {{ isFavorited ? '已收藏' : '收藏' }}
          </el-button>
        </div>
      </div>
      <h2>{{ restaurant.name }}</h2>
      <!-- 餐厅简介 -->
      <p class="restaurant-introduction">{{ restaurant.introduction }}</p>
      <h3>菜品列表</h3>
      <div class="dish-cards-container">
        <div
            v-for="(dish, index) in arrangedDishes"
            :key="index"
            class="dish-card-wrapper"
        >
          <!-- 菜品卡片开始 -->
          <el-card class="dish-card">
            <div class="dish-image-wrapper">
              <img :src="dish.imageUrl" alt="菜品图片" class="dish-image">
            </div>
            <div class="dish-card-content">
              <h3>{{ dish.name }}</h3>
              <p>价格：{{ dish.price }}</p>
            </div>
          </el-card>
          <!-- 菜品卡片结束 -->
        </div>
      </div>
      <h3>用户评分与评价</h3>
      <el-rate v-model="rating" show-text :texts="['极差', '失望', '一般', '满意', '惊喜']"></el-rate>
      <el-input type="textarea" v-model="comment" placeholder="请留下您的评价"></el-input>
      <el-button type="primary" @click="submitReview">提交评价</el-button>
      <!-- 展示历史评价 -->
      <h3>部分历史评价</h3>
      <div v-for="(review, reviewIndex) in historicalReviews" :key="reviewIndex" class="historical-review">
        <p><strong>用户名：</strong> {{ review.username }}</p>
        <p><strong>评分：</strong> {{ review.rating }}</p>
        <p><strong>评价内容：</strong> {{ review.comment }}</p>
      </div>
    </el-card>
  </div>
</template>

<script>
import { ref, onMounted, computed } from 'vue';

export default {
  setup() {
    const restaurant = ref({
      id: 1,
      name: '演员陆二喜的鸡汤餐厅',
      imageUrl: '/restaurant1.jpeg',
      rating: 5.0,
      menu: [
        {
          name: '招牌鸡汤',
          price: 88,
          imageUrl: '/chicken_soup.jpg'
        },
        {
          name: '预制漂亮饭',
          price: 8.8,
          imageUrl: '/PremadeCornKernels.jpeg'
        },
        // 这里可以添加更多菜品数据以测试布局效果
        {
          name: '地道红烧排骨',
          price: 28,
          imageUrl: '/PorkRibs.jpeg'
        },
        {
          name: '美味地锅鸡',
          price: 38,
          imageUrl: '/ClayPotChicken.jpeg'
        },
        {
          name: '经典回锅肉',
          price: 28,
          imageUrl: '/TwiceCookedPork.jpeg'
        },
      ],
      // 新增餐厅信息数据
      introduction: '提供美味鸡汤，和催逝员一起享受美味鸡汤，拥有舒适的用餐环境和优质的服务。',
      businessHours: '周一至周日 10:00 - 22:00',
      phoneNumber: '123-456-7890',
      specialServices: '提供免费停车位、生日优惠',
      capacity: '100 人',
      isReservable: '是'
    });

    const rating = ref(0);
    const comment = ref('');

    // 用于存储历史评价的数组，添加了用户名信息
    const historicalReviews = ref([
      {
        username: '用户1',
        rating: 4,
        comment: '这家餐厅的菜品味道很不错，环境也很舒适，下次还会再来。'
      }
    ]);
    const isFavorited = ref(false); // 用于追踪收藏状态

    const toggleFavorite = () => {
      isFavorited.value = !isFavorited.value;
    };
    const submitReview = () => {
      // 模拟发送评价数据到后端，这里应该替换为真实的API调用
      const newReview = {
        username: '当前用户', // 这里可以根据实际登录情况获取真实用户名
        rating: rating.value,
        comment: comment.value
      };

      // 这里假设发送请求成功，将新评价添加到历史评价列表中
      historicalReviews.value.push(newReview);

      // 清空当前输入的评价内容和评分
      rating.value = 0;
      comment.value = '';

      console.log('提交评价成功：', newReview);
    };

    onMounted(() => {
      // 模拟在页面加载完成后调用提交评价函数（示例，实际应根据业务逻辑调用）
      // submitReview();
      // 这里可以实现获取餐厅详细信息的逻辑，比如发送请求到后端
      console.log('获取餐厅详情页数据');
    });

    // 计算属性，用于处理菜品排列，使其每行显示五个
    const arrangedDishes = computed(() => {
      const dishes = restaurant.value.menu;
      const rows = Math.ceil(dishes.length / 5);
      const arranged = [];

      for (let i = 0; i < rows; i++) {
        const startIndex = i * 5;
        const endIndex = Math.min((i + 1) * 5, dishes.length);
        arranged.push(dishes.slice(startIndex, endIndex));
      }

      return arranged.flat();
    });

    return {
      restaurant,
      rating,
      comment,
      submitReview,
      arrangedDishes,
      historicalReviews,
      isFavorited,
      toggleFavorite
    };
  }
};
</script>

<style scoped>
.restaurant-detail-page {
  background-color: #f9f9f9;
  padding: 20px;
}

.restaurant-info-container {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.restaurant-image {
  max-width: 700px;
  max-height: 320px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 15px;
  display: flex;
  flex-direction: column;
}

.restaurant-info-right {
  flex: 1;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 15px;
  display: flex;
  flex-direction: column;
}

.info-title {
  color: #333;
  font-size: 18px;
  margin-bottom: 10px;
}

.info-label {
  font-weight: bold;
  color: #333;
}

.restaurant-introduction {
  color: #666;
  font-size: 16px;
  line-height: 1.5;
  margin-top: 10px;
}

.dish-cards-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
}

.dish-card {
  width: 380px;
  margin: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 8px;
  border: 1px solid #e5e5e5;
  background-color: #fff;
  transition: all 0.3s ease;
}

.dish-image-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
}

.dish-image {
  max-width: 500px;
  max-height: 120px;
  object-fit: cover;
  border-radius: 5px;
  border: none;
}

.dish-card-content {
  padding: 10px;
}

.dish-card-content h3 {
  color: #333;
  font-size: 18px;
  margin-bottom: 5px;
  font-weight: 500;
  line-height: 1.3;
}

.dish-card-content p {
  color: #666;
  font-size: 16px;
  line-height: 1.3;
}

.el-rate {
  margin-top: 10px;
  color: #ffc107;
  font-size: 20px;
}

.el-input[type="textarea"] {
  margin-top: 10px;
  border-radius: 5px;
  border: 1px solid #e5e5e5;
  padding: 10px;
  resize: vertical;
  transition: all 0.3s ease;
}

.el-input[type="textarea"]:focus {
  border-color: #007bff;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
}

.el-button[type="primary"] {
  margin-top: 10px;
  border-radius: 5px;
  background-color: #007bff;
  color: #fff;
  padding: 10px 20px;
  transition: all 0.3s ease;
}

.el-button[type="primary"]:hover {
  background-color: #0056b3;
}

.dish-card:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
  cursor: pointer;
}

.historical-review {
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 15px;
  margin-top: 10px;
}
/* 添加收藏按钮的样式 */
.favorite-button {
  margin-top: 10px;
  border-radius: 5px;
  background-color: #007bff; /* 蓝色背景 */
  color: #fff;
  padding: 20px 40px;
  font-size: 14px; /* 减小字体大小以适应按钮宽度 */
  transition: all 0.3s ease;
  width: calc(4 * 1em); /* 根据文字大小设置宽度 */
}

.is-favorited {
  background-color: #ffc107; /* 已收藏时的黄色背景 */
  color: #fff; /* 已收藏时的文字颜色 */
  border-color: #ffc107; /* 已收藏时的黄色边框 */
}

.favorite-button:hover {
  background-color: #0056b3; /* 鼠标悬浮时的背景色 */
}

.is-favorited:hover {
  background-color: #e0a800; /* 鼠标悬浮时的黄色背景 */
}
</style>
